<template>
  <div>
    <!-- 权限点数据展示 -->
      <el-tree
         ref="refTree"
        :data="list"
        :props="{ label: 'name' }"
        default-expand-all
        :show-checkbox="true"
        :check-strictly="true"
        node-key="id"
      />
      <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small">取消</el-button>
        <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getPermissionList} from '@/api/permission'
import {arrayToTree} from '@/utils'
import {getRoleDetail,assignPerm} from '@/api/settings'
export default {
  props:{
  roleId:{
    type:String,
    required:true
  }
  }
  ,
data(){

  return{
    list:[]
  }
}
,
created() {
  this.loadPermissionList()
  this.loadPermissionByRoleId()
},
 methods:{
    async hSubmit(){
    const permIds = this.$refs.refTree.getCheckedKeys()
    await assignPerm({id:this.roleId,permIds:permIds})
    this.$emit('success')
   }
   ,
   async loadPermissionList() {
    // 发送请求, 获取权限列表
    const res = await getPermissionList()
    this.list = arrayToTree(res.data)
  },
  async loadPermissionByRoleId() {
    // 根据roleId获取当前这个角色已经具备的权限
    const res = await getRoleDetail(this.roleId)
  console.log('获取当前角色的已有的权限点数据', res.data.permIds)
  this.$refs.refTree.setCheckedKeys(res.data.permIds)
 }
}
}
</script>

<style>

</style>